<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>bills</title>

    <link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.css}" rel="stylesheet">

    <link th:href="@{/css/bills.css}" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <!--<div th:replace="common::warning-frame"></div>-->
    <!--<div class="alert alert-warning" role="alert" th:if="${errorMsg != null}" th:fragment="warning-frame">[[${errorMsg}]]-->
    </div>
    <div th:replace="common::navBar"></div>
    <div class="row">
        <div th:replace="common::sideBar"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
                <h1 class="h2">账单月份列表</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group mr-2">
                        <a href="#" th:href="@{/gotoAddPage}" class="btn btn-sm btn-success">添加流水</a>
                    </div>
                </div>
            </div>

            <!--<canvas class="my-4" id="myChart" width="900" height="380"></canvas>-->

            <!--<h2>账号列表</h2>-->
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                        <tr>
                            <th>年份</th>
                            <th>月份</th>
                            <th>总收入</th>
                            <th>总支出</th>
                            <th>详情</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr th:each="bill : ${bills}">
                        <td>[[${bill.occurYear}]]</td>
                        <td>[[${bill.occurMonth}]]</td>
                        <td>[[${bill.totalRevenue}]]</td>
                        <td>[[${bill.totalCost}]]</td>
                        <td>
                            <a class="btn btn-success btn-sm" th:href="@{'/goToRunningAccount?userId=1&year=' + ${bill.occurYear} + '&month=' + ${bill.occurMonth}}">详情</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form id="delForm" method="post">
                    <input type="hidden" name="_method" value="delete"/>
                </form>
            </div>
        </main>
    </div>
</div>


<script th:src="@{/webjars/jquery-slim/3.3.1-1/jquery.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.js}"></script>
</body>
</html>